GEOG 5201 – Spring 2022
Programming is required for improving existing software products, developing new ones, and turning creative ideas into reality. In previous labs, we learned how to create web applications without programming using various configurable app templates and app builders. These apps provide tremendous functionality, but they may not meet all your project requirements. In such cases, we must either program our own apps or customize existing web apps.
A web mapping application is essentially a web page with special scripts that add a map to the page dynamically. The objective of this lecture is to introduce three basic languages for making web pages: HTML, CSS, and JavaScript.
Web development does not necessitate the use of a professional integrated development environment (IDE). We can write code in any plain text editor and then load and run it in a web browser.
HTML stands for HyperText Markup Language, which is a markup language for buidling web pages. HTML tells the browser how to display the content using a series of elements delineated by tags. We use a simple HTML document to demonstrate how it works:
<html>
<body>
<h1>This is a Heading</h1>
<h2>This is a Heading</h2>
<p>My first paragraph.</p>
</body>
</html><p>), which usually come in pairs (e.g., <body> and </body>, where <body> is the start tag and </body> is the end tag). <h1>This is a Heading</h1>). A detailed explanation of this example is given below:
<html></html> tags are the root of an HTML page, which are the container for all other HTML elements<body></body> tags define the document's body, and are the container for all the visible contents (e.g., headings and paragraphs)<h1></h1> tags define a heading level 1<h2></h2> tags define a heading level 2<p></p> tags define a paragraph of textAs we saw earlier, the <h1></h1>...<h6></h6> tags are used to define headings, and the <p></p> tags are used to define paragraphs. Other tags frequently used to define elements in the body of a document include:
<em></em> to italicize text<strong></strong> to bold text<br> to create a line break or new line<hr> to insert a horizontal rule (line)<html>
<body>
<h1>This is a Heading</h1>
<h2>This is a Heading</h2>
<p><strong><em>My first paragraph.</em></strong><br>
My second paragraph.<hr>
</p>
</body>
</html>Here is a quick reference guide to HTML tags. We will go over the tags used to define lists, images, and links in more detail.
HTML allows authors to define two types of lists -- ordered and unordered. Ordered lists are defined by <ol></ol> tags. Within these tags, each item should be enclosed within <li> and </li> tags. By default, web browsers number the items automatically beginning with 1.
<html>
<body>
<h4>Ordered List</h4>
<ol>
<li>Citizen Kane</li>
<li>Casablanca</li>
<li>The Godfather</li>
</ol>
</body>
</html>For unordered lists, the list items are defined the same way with <li></li>, but the items are enclosed by <ul></ul> rather than <ol></ol>. By default, web browsers mark the items with bullets.
<html>
<body>
<h4>Unordered List</h4>
<ul>
<li>Ford</li>
<li>GM</li>
<li>Chrysler</li>
</ul>
</body>
</html>Images are added to a web page using the <img> tag.
<html>
<body>
<img src="http://www.personal.psu.edu/jed124/icons/brown_MarkerA.png">
</body>
</html>Links are added to a web page using the anchor tag (<a>) and its href attribute.
<html>
<body>
<a href="https://geography.osu.edu/">OSU Geography</a>
</body>
</html>CSS stands for Cascading Style Sheets, which is a markup language for styling web pages. With CSS, one can separate the page content from the presentation settings, and can easily manage the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!
The basic syntax used in CSS coding is selector {property: value}, where selector is some element, property is one of its attributes, and value is the value that you want to assign to the attribute. An example of CSS is:
p {
color: red;
font-family: courier;
font-size: 160%;
}Here is a quick reference guide to CSS properties.
CSS can be added to HTML documents in three ways:
style attribute inside HTML elements<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html><style> element in the <head> section<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html><link> element to link to an external CSS file<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>styles.css file looks like:
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}JavaScript is the programming language of the Web, which is a bridge between web browsers and servers. It interacts with servers to use their capabilities and works with web browsers to make web pages dynamic and interactive.
In HTML, JavaScript code is inserted between <script></script> tags:
<html>
<body>
<p>My First JavaScript.</p>
<script>
alert( 'Hello, world!' );
</script>
</body>
</html>Scripts can also be placed in external files:
<html>
<body>
<p>My First JavaScript.</p>
<script src="myScript.js"></script>
</body>
</html>This is what the myScript.js file looks like:
alert( 'Hello, world!' );Variables are containers for storing data (storing data values). A common way to declare a JavaScript Variable is to use the var keyword:
var x = 5;
var y = 6;
var z = x + y;A JavaScript function is a block of code designed to perform a particular task, which is executed when "something" invokes it (calls it), like when the user clicks the button. A function is defined with the function keyword, followed by a name, followed by parentheses ():
function name(parameter1, parameter2, parameter3) {
// code to be executed
}The following example shows how variables and functions work in JavaScript:
x = myFunction(4, 3); // Function is called, return value will end up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, it can "react" on these events. The syntax for events is <element event='some JavaScript'>. In the following example, an onclick event is added to a <button> element, with the JavaScript code used to display the date when the event occurs:
<button onclick="displayDate()">The time is?</button>Here is a list of some common HTML events.
When an HTML document is loaded into a web browser, it becomes a document object. JavaScript objects are variables for named values, called properties and methods.
A simple example is shown below:
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>myFunction() is a function used to modify the paragraph's text to Hello World. It is executed when the user clicks the buttongetElementById() is a method that returns the element that has the ID attribute with the specified valueinnerHTML is a property that sets or returns the HTML content (inner HTML) of an elementHere is a series of properties and methods for document objects that can be used on HTML documents.